<template>
  <div id="result-albums">
    <div
      v-for="(item, index) in albums"
      :key="index"
      :class="{'album-item': true, isEven: (index + 1) % 2 === 0 }">
      <div class="left-part">
        <div class="img-container">
          <img :src="item.picUrl" alt="">
          <img class="blur" :src="item.blurPicUrl" alt="">
        </div>
        <div class="album-name">{{ item.name }}</div>
      </div>
      <div class="right-part">
        <div class="artist-name">{{ item.artist.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResultAlbum',
  props: {
    albums: {
      type: Array,
      default () {
        return []
      }
    }
  }
}
</script>

<style scoped lang="less">
#result-albums {
  user-select: none;
  .album-item {
    cursor: pointer;
    padding: 10px 0 10px 30px;
    height: 65px;
    display: flex;
    > div {
      display: flex;
    }
    .left-part {
      flex: 1;
      .img-container {
        width: 45px;
        height: 0;
        padding-top: 100%;
        position: relative;
        img {
          position: absolute;
          top: 0;
          width: 100%;
        }
      }
      .album-name {
        padding-left: 20px;
        margin: auto 0;
        font-size: 13px;
        color: #333;
      }
    }
    .right-part {
      flex: 1;
      .artist-name {
        margin: auto 0;
        font-size: 13px;
        color: #666;
      }
    }
    &.isEven {
      background-color: #f5f5f7;
    }
    &:hover {
      background-color: #ebeced;
    }
  }
}
</style>
